@use '../../../styles/mixins';
@use '../variables';

$block: '.#{variables.$ns}menu';

#{$block} {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden auto;
    font-size: var(--g-text-body-1-font-size);
    color: var(--g-color-text-primary);
    background-color: var(--g-color-base-float);
    user-select: none;
    outline: none;

    &__list-group-item + &__list-group-item,
    &__list-item + &__list-group-item,
    &__list-group-item + &__list-item {
        border-block-start: 1px solid var(--g-color-line-generic);
    }

    &__item {
        display: flex;
        align-items: center;
        color: var(--g-color-text-primary);
        text-decoration: none;
        outline: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

        &-icon {
            display: flex;
        }

        &-icon-end {
            display: flex;
            margin-inline-end: 0;
        }

        &-content {
            flex-grow: 1;
            min-width: 0;
        }

        &_interactive {
            cursor: pointer;

            &:hover,
            &:focus-visible {
                background-color: var(--g-color-base-simple-hover);
            }
        }

        &_selected {
            background-color: var(--g-color-base-simple-hover);
        }

        &_disabled {
            color: var(--g-color-text-secondary);
            cursor: default;
            pointer-events: none;

            &:hover {
                background-color: transparent;
            }
        }

        &_active {
            cursor: default;
            background-color: var(--g-color-base-selection);

            &:hover,
            &:focus-visible {
                background-color: var(--g-color-base-selection-hover);
            }
        }

        &_theme_danger {
            &:not(#{$block}__item_disabled) {
                color: var(--g-color-text-danger);
            }
        }
    }

    &__group-label {
        @include mixins.text-accent();
        color: var(--g-color-text-hint);
    }

    &__group-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    &_size {
        &_s {
            line-height: 24px;
            padding: var(--g-spacing-1) 0;

            #{$block}__item,
            #{$block}__group-label {
                padding: 0 var(--g-spacing-3);
            }

            #{$block}__item-icon {
                margin-inline-end: var(--g-spacing-2);
            }

            #{$block}__item-icon-end {
                margin-inline-start: var(--g-spacing-2);
            }

            #{$block}__list-group-item + #{$block}__list-group-item,
            #{$block}__list-item + #{$block}__list-group-item,
            #{$block}__list-group-item + #{$block}__list-item {
                margin-block-start: var(--g-spacing-1);
                padding-block-start: var(--g-spacing-1);
            }
        }

        &_m {
            line-height: 28px;
            padding: var(--g-spacing-1) 0;

            #{$block}__item,
            #{$block}__group-label {
                padding: 0 var(--g-spacing-3);
            }

            #{$block}__item-icon {
                margin-inline-end: var(--g-spacing-2);
            }

            #{$block}__item-icon-end {
                margin-inline-start: var(--g-spacing-2);
            }

            #{$block}__list-group-item + #{$block}__list-group-item,
            #{$block}__list-item + #{$block}__list-group-item,
            #{$block}__list-group-item + #{$block}__list-item {
                margin-block-start: var(--g-spacing-1);
                padding-block-start: var(--g-spacing-1);
            }
        }

        &_l {
            line-height: 32px;
            padding: var(--g-spacing-1) 0;

            #{$block}__item,
            #{$block}__group-label {
                padding: 0 var(--g-spacing-4);
            }

            #{$block}__item-icon {
                margin-inline-end: var(--g-spacing-2);
            }

            #{$block}__item-icon-end {
                margin-inline-start: var(--g-spacing-2);
            }

            #{$block}__list-group-item + #{$block}__list-group-item,
            #{$block}__list-item + #{$block}__list-group-item,
            #{$block}__list-group-item + #{$block}__list-item {
                margin-block-start: var(--g-spacing-1);
                padding-block-start: var(--g-spacing-1);
            }
        }

        &_xl {
            font-size: var(--g-text-body-2-font-size);
            line-height: 36px;
            padding: var(--g-spacing-1) 0;

            #{$block}__item,
            #{$block}__group-label {
                padding: 0 var(--g-spacing-4);
            }

            #{$block}__item-icon {
                margin-inline-end: var(--g-spacing-3);
            }

            #{$block}__item-icon-end {
                margin-inline-start: var(--g-spacing-3);
            }

            #{$block}__list-group-item:not(:first-child) {
                margin-block-start: 6px;
                padding-block-start: 6px;
            }

            #{$block}__list-group-item:not(:last-child) {
                margin-block-end: 6px;
                padding-block-end: 6px;
            }
        }
    }
}
